<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js"></script>
	</head>
	<body>
		<div id="app" >
			<div ref="target" @click="btnTap">
				obj.name = {{obj.name}} |
				nameref = {{nameref}}
			</div>
		</div>
		<script>
			
			const vm = Vue.createApp({
			    setup(){
			        const {ref, reactive ,watchEffect, onMounted, toRef} = Vue;
			        const state = ref(0)
					const test = {a:1,b:2}
					const react = reactive({state,test:test})
					//console.log(react)
					react.state = 1
					//react.test.a = 5
					react.test = {c:3,d:4}
					//console.log("test = ",test);
					//console.log("react = ",react)
					
					
					
					
					const obj = { name: '张三', age: 18 };
					
					//const nameref = toRef(obj, 'name');
					//console.log("obj = ",obj);
					//console.log("nameref = ",nameref);
					
					//测试 ref toref  torefs
					const reactData = reactive(obj)
					const nameref = toRef(reactData,'name')
					console.log("this.reactData = ",reactData)
					console.log("nameref = ",nameref)
					
					
			        const target = ref(null)
			        //console.log("target = ",target)
					const message = "ddd"
					
				
					onMounted(() => {
						//console.log("target = ",target)
					})
					return {target,message,obj,nameref,reactData}
				},
				
				methods: {
					btnTap(){
						this.obj.name = "dd"
						//this.nameref = '李四';
						//this.reactData.name = 'ffff'
					    console.log("obj = ",this.obj);
						console.log("nameref = ",this.nameref);
						console.log("this.reactData = ",this.reactData)
						
						//console.log("target = ",this.target)
					}
				}
			}).mount('#app');
		    
			
		</script>
	</body>
</html>